<template>
  <view>
    <view class="dangan relative">
      <view
        class="f14 flex-cen"
        style="color: #ff4800; background-color: #ffdfd2; height: 64rpx"
      >
        请认真填写相关信息
      </view>
      <view class="dangan-yi" v-if="false">
        <view class="dangan-yi-left"> 病例编号： </view>
        <view class="dangan-yi-right">
          <input type="text" class="h100" v-model="form.id" />
        </view>
      </view>
      <view class="line"></view>
      <view class="dangan-yi">
        <view class="dangan-yi-left"> 姓名： </view>
        <view class="dangan-yi-right">
          <input type="text" class="h100" v-model="form.xtName" />
        </view>
      </view>
      <view class="dangan-yi">
        <view class="dangan-yi-left"> 身份证： </view>
        <view class="dangan-yi-right">
          <input type="text" class="h100" v-model="form.xtIdNumber" />
        </view>
      </view>
      <view class="dangan-yi">
        <view class="dangan-yi-left"> 电话： </view>
        <view class="dangan-yi-right">
          <input type="text" class="h100" v-model="form.xtPhone" />
        </view>
      </view>
      <view class="line"></view>
      <view class="dangan-er">
        <view class="dangan-yi-left">
          <view class=""> 性别： </view>
          <u-radio-group v-model="form.xtGender" iconPlacement="right">
            <u-radio activeColor="" label="男" :name="'1'"></u-radio>
            <u-radio activeColor="" label="女" :name="'2'"></u-radio>
          </u-radio-group>
        </view>
        <view class="dangan-yi-right">
          <view class=""> 年龄： </view>
          <input type="text" class="h100" v-model="form.xtAge" />
        </view>
      </view>
      <view class="line"></view>
      <view class="dangan-yi">
        <view class="dangan-yi-left"> 身高： </view>
        <view class="dangan-yi-right">
          <input type="text" class="h100" v-model="form.height" />
        </view>
        CM
      </view>
      <view class="dangan-yi">
        <view class="dangan-yi-left"> 体重： </view>
        <view class="dangan-yi-right">
          <input type="text" class="h100" v-model="form.weight" />
        </view>
        KG
      </view>
      <view class="dangan-yi">
        <view class="dangan-yi-left"> 关系： </view>
        <u-radio-group v-model="form.xtRelationship" iconPlacement="right">
          <u-radio activeColor="" label="父母" :name="'1'"></u-radio>
          <u-radio activeColor="" label="兄妹" :name="'2'"></u-radio>
          <u-radio activeColor="" label="儿女" :name="'3'"></u-radio>
          <u-radio activeColor="" label="其他" :name="'4'"></u-radio>
        </u-radio-group>
      </view>

      <view class="dangan-san">
        <view class="dangan-san-hd"> 患者病史： </view>
        <view class="dangan-san-db">
          <textarea
            name="text"
            cols="40"
            rows="10"
            v-model="form.medicalHistory"
          ></textarea>
        </view>
      </view>
      <view class="line"></view>
      <view class="dangan-san">
        <view class="dangan-san-hd"> 患者过敏病史: </view>
        <view class="dangan-san-db">
          <textarea
            name="text"
            cols="40"
            rows="10"
            v-model="form.allergicHistory"
          ></textarea>
        </view>
      </view>

      <!--  -->
      <view class="di main">
        <button class="btn btn-big" @click="send" hover-class="btn-hor">
          确认
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        xtUserFamily: null,
        xtName: null,
        xtIdNumber: null,
        xtPhone: null,
        xtGender: "1",
        xtAge: null,
        xtRelationship: null,
        allergicHistory: "",
        medicalHistory: "",
        height: null,
        weight: null,
      },
      changeOrAddStatus: false,
      e: null,
    };
  },
  methods: {
    async send() {
      if (this.changeOrAddStatus) {
        await this.$API.familyApi.changeList(this.form);
        uni.showToast({
          title: "修改成功",
        });
        uni.navigateBack();
      } else {
        await this.$API.familyApi.addList(this.form);
        uni.showToast({
          title: "新增成功",
        });
        uni.navigateBack();
      }
    },
  },
  onLoad(options) {
    if (options.data) {
      let data = JSON.parse(decodeURIComponent(options.data));
      this.form = data;
      console.log(data, "data");
      this.changeOrAddStatus = true;
    } else {
      console.log("options不存在");
      this.changeOrAddStatus = false;
    }
  },
  onShow() {},
};
</script>

<style lang="scss">
.dangan {
  .dangan-yi {
    padding: 0 40rpx;
    line-height: 100rpx;
    display: flex;
    font-size: 29rpx;
    letter-spacing: 5rpx;

    // justify-content: space-evenly;
    .dangan-yi-left {
      // text-align: center;
      // width: 160rpx;
      padding-right: 30rpx;
    }

    .dangan-yi-right {
      width: 430rpx;
    }
  }

  .dangan-er {
    padding: 0 40rpx;
    line-height: 100rpx;
    // display: flex;
    font-size: 30rpx;
    display: flex;
    letter-spacing: 5rpx;
    box-sizing: border-box;

    .dangan-yi-left {
      width: 50%;
      display: flex;
      // background-color: red;
      align-items: center;

      input {
        width: 230rpx;
      }
    }

    .dangan-yi-right {
      width: 50%;
      display: flex;
      // background-color: red;
      align-items: center;

      input {
        width: 230rpx;
      }
    }
  }

  .dangan-san {
    padding: 20rpx 40rpx;
    font-size: 30rpx;
    letter-spacing: 5rpx;

    .dangan-san-db {
      margin-top: 20rpx;
    }
  }
}
</style>